<template>
	<view class="detail_wrap">
		<view class="detail_box top box1">
			<view class="detail_item ">
				<uni-transition :mode-class="modeClass" :show="show" ref='anis'>
					<image src="https://pd.pdaxiang.com/upload/static/user/userbj.png" mode="aspectFill"></image>
					<view class="text">
						qqqqqq
					</view>
					<view class="detail_text">
						拒提100大王币
					</view>
				</uni-transition>
			</view>
			<view class="detail_item ">

				<uni-transition :mode-class="modeClass" :show="show" ref='anis1'>
					<image src="https://pd.pdaxiang.com/upload/static/user/userbj.png" mode="aspectFill"></image>
					<view class="text">
						qqqqqq
					</view>
					<view class="detail_text">
						拒提100大王币
					</view>
				</uni-transition>
			</view>


		</view>
		<view class="detail_box box2">
			<view class="detail_item ">
				<uni-transition :mode-class="modeClass" :show="show1" ref="ani">
					<image src="https://pd.pdaxiang.com/upload/static/user/userbj.png" mode="aspectFill"></image>
					<view class="text">
						qqqqqq
					</view>
					<view class="detail_text">
						拒提100大王币
					</view>
				</uni-transition>
			</view>
			<view class="detail_item ">
				<uni-transition :mode-class="modeClass" :show="show1" ref="ani1">
					<image src="https://pd.pdaxiang.com/upload/static/user/userbj.png" mode="aspectFill"></image>
					<view class="text">
						qqqqqq
					</view>
					<view class="detail_text">
						拒提100大王币
					</view>
				</uni-transition>
			</view>
			<view class="detail_item ">
				<uni-transition :mode-class="modeClass" :show="show1" ref="ani2">
					<image src="https://pd.pdaxiang.com/upload/static/user/userbj.png" mode="aspectFill"></image>
					<view class="text">
						qqqqqq
					</view>
					<view class="detail_text">
						拒提100大王币
					</view>
				</uni-transition>
			</view>
		</view>
		<button style="margin-top: 50rpx;" @tap='open' :show="show1">离开</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				show1: false,
				modeClass: 'slide-top',
				iconurl:this.$configs.urls

			}
		},
		mounted() {
			////console.log('子组件显示了')
			this.star()
			this.custom()
		},
		destroyed() {
			////console.log('子组件销毁了')
		},
		methods: {
			custom() {
				////console.log('开始自定义动画')
				this.$refs.ani.step({
					translateX: '-400px',
				})
				this.$refs.ani1.step({
					translateX: '-400px',
				})
				this.$refs.ani2.step({
					translateX: '-400px',
				})
				this.$refs.ani.run(()=>{
				})
				this.$refs.ani1.run(()=>{
				})
				this.$refs.ani2.run(()=>{
				})
			},
			star() {
				this.show = !this.show
				setTimeout(() => {
					this.show1 = !this.show1
				}, 500)
				 clearTimeout();
			},
			open(mode) {
				this.modeClass = 'slide-left'
				this.show = !this.show
				this.show1 = !this.show1
				// this.toLeft()
				setTimeout(() => {
					this.$parent.show = false
				}, 500)
				 clearTimeout();
			},
			change() {
				////console.log('触发动画')
			},
			// toLeft(){
			// 	////console.log('触发动画ssssssss')
			// 	this.$refs.anis1.step({
			// 		translateX: '400px',
			// 	})
			// 	this.$refs.ani.step({
			// 		translateX: '400px',
			// 	})
			// 	this.$refs.ani1.step({
			// 		translateX: '400px',
			// 	})
			// 	this.$refs.ani2.step({
			// 		translateX: '400px',
			// 	})
			// 	this.$refs.anis1.run(()=>{
			// 	})
			// 	this.$refs.ani.run(()=>{
			// 	})
			// 	this.$refs.ani1.run(()=>{
			// 	})
			// 	this.$refs.ani2.run(()=>{
			// 	})
			// 	////console.log('动画ssssssss')
			// }

		}
	}
</script>

<style lang="scss" scoped>
	.detail_wrap {
		padding: 30rpx;

		.box1 {
			display: flex;
			text-align: center;
			margin-bottom: 40rpx;
			animation-duration: 1s;
			animation-delay: 1s; //延迟时间
			// animation-iteration-count: infinite; //是否循环播放
		}

		.box3 {
			display: none;
		}

		.box4 {
			display: flex;
			text-align: center;
			margin-bottom: 40rpx;
			animation-duration: 2s;
			animation-delay: 2s; //延迟时间
		}

		.box2 {
			display: flex;
			z-index: 100;
			animation-duration: 2s;
			animation-delay: 2s; //延迟时间
		}

		.detail_box {
			display: flex;
			align-items: center;

			.detail_item {
				flex: 1;

				image {
					width: 200rpx;
					height: 300rpx;
				}

				.text {}

				.detail_text {
					width: 200rpx;
					text-align: center;
					margin: auto;
				}
			}

		}
	}
</style>
